<template>
    <div class="container"> 
        <div class="schart-box">
            <schart class="schart" canvasId="pie" :options="options"></schart>
        </div>
        <div class="schart-boxl" v-if="testsRun">
            <div class="schart">
                <p style="margin-bottom:10px">测试数据：</p>
                <p style="color:#2db7f5; margin-bottom:10px">用例总数：{{ this.testsRun }}</p>
                <p style="color:#19be6b; margin-bottom:10px">用例成功：{{ successes }}</p>
                <p style="color:#ff9900; margin-bottom:10px">用例失败：{{ failures }}</p>
                <p style="color:#ed4014; margin-bottom:10px">用例错误：{{ errors }}</p>
                <p style="margin-bottom:10px">开始时间：{{ start_datetime }}</p>
                <p style="margin-bottom:10px">运行时长：{{ duration }}</p>
            </div>
        </div>
        <div class="casexq" v-if="details">
            <div v-for="(times,index1) in details" :key='index1'>
              <div v-for="(time,index) in times.records" :key='index'>
              <el-collapse v-model="activeNames"> 
                  <el-collapse-item>
                      <template>
                          <span slot="title" class="collapse-title">接口{{ index+1 }}：{{time.name}}
                              <span style="float: right;margin-right: 50px;">
                              结果：{{time.status}}
                                  <!-- <strong :style="{color: getColor(item.status)}">{{item.status}}</strong> -->
                              </span>
                          </span>
                      </template>
                      <el-collapse style="margin-left: 30px;">
                          <el-collapse-item>
                              <template>
                                  <span slot="title" class="collapse-title">request</span>
                              </template>
                              <div>请求方法：{{time.meta_data.request.method}}</div>
                              <hr>
                              <div>url：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{time.meta_data.request.url}}</div>
                              <hr>
                              <div>header：&nbsp;&nbsp;{{time.meta_data.request.headers}}</div>
                              <hr>
                              <div>body：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{time.meta_data.request.body}}</div>
                              <hr>
                              <div>params：{{time.meta_data.request.params}}</div>
                              <hr>
                              <div>json：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{time.meta_data.request.json}}</div>

                          </el-collapse-item>
                          <el-collapse-item>
                              <template>
                                  <span slot="title" class="collapse-title">response</span>
                              </template>
                              <div>状体码：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.status_code }}</div>
                              <hr>
                              <div>reason：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.reason }}</div>
                              <hr>
                              <div>响应时间：&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.response_time_ms }}</div>
                              <hr>
                              <div>cookies：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.cookies }}</div>
                              <hr>
                              <div>ok：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.ok }}</div>
                              <hr>
                              <div>响应类型：&nbsp;&nbsp;{{ time.meta_data.response.content_type }}</div>
                              <hr>
                              <div>响应大小：&nbsp;&nbsp;{{ time.meta_data.response.content_size }}</div>
                              <hr>
                              <div>content：{{ time.meta_data.response.content }}</div>
                              <hr>
                              <div>text：{{ time.meta_data.response.text }}</div>
                              <hr>
                              <div>json：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ time.meta_data.response.json }}</div>
                          </el-collapse-item>
                          <el-collapse-item>
                              <template>
                                  <span slot="title" class="collapse-title">validators</span>
                              </template>
                              <el-table
                                  :data="time.meta_data.validators"
                                  style="width: 100%">
                                  <el-table-column
                                      prop="check"
                                      label="check"
                                      width="200">
                                  </el-table-column>
                                  <el-table-column 
                                      prop="expect"
                                      label="expect(预期结果)"
                                      width="200">
                                  </el-table-column>
                                  <el-table-column 
                                      prop="comparator"
                                      label="comparator"
                                      width="200">
                                  </el-table-column>
                                  <el-table-column 
                                      prop="check_value"
                                      label="eheck_value(实际结果)"
                                      width="200">
                                  </el-table-column>
                                  <el-table-column 
                                      prop="check_result"
                                      label="check_result"
                                      width="200">
                                  </el-table-column>
                              </el-table>
                          </el-collapse-item>
                      </el-collapse>
                  </el-collapse-item>
              </el-collapse>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import Schart from 'vue-schart';
import { read_reports } from '../../api/api'
export default {
    name: 'basecharts',
    components: {
        Schart
    },
    data() {
      return {
        parameter: {},
        testsRun:'',
        failures:'',
        errors:'',
        successes:'',
        duration:'',
        start_datetime:'',
        details: [],
        datas: [],
        options: {
            type: 'pie',
            title: {
                text: '用例执行情况饼状图'
            },
            legend: {
                position: 'left'
            },
            bgColor: '#fbfbfb',
            labels: ['成功', '失败','错误'],
            datasets: [
                {

                    data: [1,1,1]
                }
            ],
        },
        records: [],
        tableData: [],
        activeNames: [],
        };
    },
    created() {
        this.getData()
    },
    methods: {
        getData(){
            read_reports(this.$route.query.id)
                .then(response =>{
                    this.parameter = Object.assign({},response)
                    this.testsRun = response.data.summary.stat.testsRun
                    this.failures = response.data.summary.stat.failures
                    this.errors = response.data.summary.stat.errors
                    this.successes = response.data.summary.stat.successes
                    this.start_datetime = response.data.summary.time.start_datetime
                    this.duration = response.data.summary.time.duration
                    response.data.summary.details.forEach(item => {
                         this.details.push(item)
                    })
                    this.options.datasets[0].data = [this.parameter.data.summary.stat.successes,this.parameter.data.summary.stat.failures,this.parameter.data.summary.stat.errors]
                    this.$message.success("获取报告数据成功");

                })
                .catch(error => {
                    this.$message.error("获取报告数据失败");
                })
        }
    }
};
</script>

<style scoped>
.container{
    width: 100%;
    height: 100%;
}
.schart-box{
    width: 35%;
    margin-left: 20px;
    float: left;
}
.schart-boxl {
    width: 500px;
    margin-left: 100px;
    float: left;
}
.schart {
    width: 500px;
    height: 300px;
}
.collapse-title {
         flex: 1 0 90%;
         order: 1;
     }
     .el-collapse-item__header {
         flex: 1 0 auto;
         order: -1;
     }
.casexq{
    width: 90%;
    float: left;
    margin-top: 20px;
}
</style>